<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<title><h:outputText value="#{msg['farmework']['login']}" /></title>
	<h:outputStylesheet library="assets" name="css/login.css" />
	<h:outputScript library="assets" name="js/login.js" />
</h:head>
<h:body styleClass="login-body">
	<div class="login-image">
		<div class="card login-panel ui-fluid">
			<h:form prependId="false" onsubmit="/login">
				<p:messages id="msg" style="margin:0px" showDetail="true" />
				<div class="login-panel-content">
					<p:outputPanel id="login_plane" class="ui-g">
						<div class="ui-g-12 ui-sm-6 ui-md-6" style="text-align: left;">
							<i class="fa fa-fw fa-user logo"></i>
						</div>
						<div class="ui-g-12 ui-sm-6 ui-md-6" style="text-align: right;">
							<h2 class="welcome-text">Welcome Guest</h2>
							<span class="guest-sign-in">Sign in to My Zone </span>
						</div>

						<div class="ui-g-12" style="text-align: left;">
							<span class="md-inputfield"> <p:inputText required="true"
									tabindex="1" id="username" name="username"
									value="#{viewScope.username}" /> <p:outputLabel
									value="Username" />
							</span>

						</div>
						<div class="ui-g-12" style="text-align: left;">
							<span class="md-inputfield"> <p:password required="true"
									tabindex="1" id="password" name="password" redisplay="true"
									value="#{viewScope.password}" /> <p:outputLabel
									value="Password" />
							</span>
						</div>

						<div class="ui-g-12 ui-sm-8 ui-md-8" style="text-align: left;">
							<span class="md-inputfield"> <p:inputText required="true"
									id="captcha" name="captcha" redisplay="true"
									value="#{viewScope.captcha}" /> <p:outputLabel value="Captcha" />
							</span>
						</div>
						<div class="ui-g-12 ui-sm-4 ui-md-4" style="text-align: right;">
							<p:graphicImage value="#{viewScope.captchaImg}" stream="false" />
						</div>


						<div class="ui-g-12 ui-sm-6 ui-md-6" style="text-align: left;">
							<p:selectBooleanCheckbox id="remember_me"
								value="#{viewScope.rememberMe}" />
							<p:outputLabel value="Remember me" style="margin: 0 16px 0 8px;"
								for="remember_me" />
						</div>
						<div class="ui-g-12 ui-sm-6 ui-md-6" style="text-align: right;">
							<p:link href="#{contextPath}/anon/reset_password"
								value="Forgot password?" />
						</div>

						<div class="ui-g-12 ">
							<p:commandButton action="#{controller.onLogin}" ajax="false"
								update="@form" oncomplete="checkEmpty()" value="Sign In"
								style="margin-top:10px;display:block" />
						</div>
						<div class="ui-g-12 ">
							<p:separator />
							<p:outputPanel styleClass="subinfo" style="display:black">
						New to My Zone?
						<p:link href="#{contextPath}/anon/register"
									value="Create an account." />
							</p:outputPanel>
						</div>
					</p:outputPanel>
				</div>
			</h:form>
		</div>
	</div>
</h:body>
</html>